<template>
  <div class="details">
    <van-empty class="details__noData" v-if="!tableData.length" image="error" description="暂无数据" />
    <Table v-if="tableData.length" :columns="columns" :data="tableData" @row-click="handleRowClick"></Table>
    <Dialog theme="round-button" v-model="show" title="编辑" @confirm="handleConfirm" show-cancel-button>
      <Field v-model="value" :label="label" :placeholder="placeholder" class="details__input" :border="true" />
    </Dialog>
    <Popup v-model="showPicker" position="bottom">
      <Picker show-toolbar :columns="list" value-key="label" @confirm="handleConfirm" @cancel="showPicker = false" />
    </Popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Table from '@/components/table';
import type { Columns, TableData } from '@/components/table';
import { isEmpty } from '@/utils';
import type { ConfigItem } from '@/types/tester';
import Dialog from '@/components/dialog';
import Input from '@/components/input';
import { Field, Popup, Picker } from 'vant';
import { log } from '@/utils';

type eConfigItem = ConfigItem & {
  groupName: string;
  label: string;
  value: string;
  group?: string;
  hide?: boolean;
  unit?: string;
  placeholder?: string;
}

@Component({
  name: 'Details',
  components: {
    Table,
    Dialog,
    Input,
    Field,
    Popup,
    Picker,
  }
})
export default class Details extends Vue {
  private show = false;
  private value = '';
  private key = '';
  private label = '';
  private showPicker = false;
  private list: string[] = [];
  // private editableStyle = 'color: #1989fa';

  private get placeholder() {
    return `请输入${this.label}`;
  }
  private get result() {
    return this.$store.state.result;
  }

  private get tableData() {
    const result = this.result.filter((i: eConfigItem) => !i.hide).map((i: eConfigItem) => {
      let value = i.value;
      if (i.unit && i.value !== '') {
        value = `${i.value} ${i.unit}`;
      }
      if (isEmpty(value)) {
        value = '-';
      }
      if (i.editable) {
        i.placeholder = i.editType === 'select' ? `请选择${i.label}` : `请输入${i.label}`
      }
      return {
        ...i,
        editable: i.editable,
        groupName: i.groupName,
        group: i.group,
        label: i.label,
        value,
      };
    });
    return result;
  }

  private get columns(): Columns {
    const hasGroup = Boolean(this.tableData.some((i: eConfigItem) => i.group));
    const labelWithValue = [{
      field: 'label',
      headerName: '试验数据',
    }, {
      field: 'value',
      headerName: '数值',
    }]
    const group = [{
      field: 'groupName',
      headerName: '分组',
      mergeField: 'group',
    }]
    const result = hasGroup ? [...group, ...labelWithValue] : labelWithValue;
    return result;
  }

  handleRowClick(row: TableData) {
    if (!row.editable || row.field !== 'value') return;
    log('表格编辑', row);
    this.key = row.key;
    this.label = row.label;
    this.value = row.value === '-' ? '' : String(row.value).replaceAll(`${row.unit}`, '').trim();
    if (row.editType === 'select') {
      this.showPicker = true;
      this.list = row.editOptions ?? [];
      return
    }
    this.show = true;
    if (row.editType === 'input') {
      this.show = true;
    }
  }

  handleConfirm(value: string = this.value) {
    const result = this.result.map((i: eConfigItem) => {
      if (i.key === this.key) {
        i.value = value;
      }
      return i;
    })
    this.$store.dispatch('setResult', result);
    this.show = false;
    this.showPicker = false;
  }

  handleInput(e: Event) {
    this.value = (e.target as HTMLInputElement).value;
  }
}
</script>

<style lang="scss" scoped>
.details {
  margin: 0 auto;
  text-align: center;
  max-height: 400px;
  overflow-y: scroll;

  &__noData {
    color: rgba(129, 129, 129, 0.88);
    font-size: 14px;
    text-align: center;
  }
}
</style>
